<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    border
    stripe
    :default-sort="{ prop: 'date', order: 'descending' }"
  >
    <el-table-column type="index" label="序号" width="60" align="center">
    </el-table-column>
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form
          label-position="left"
          inline
          class="demo-table-expand"
          v-for="item in props.row.children"
          :key="item.id"
        >
          <el-form-item>
            <span>{{ item.name }}</span>
          </el-form-item>
          <el-form-item>
            <span>{{ item.url }}</span>
          </el-form-item>
          <el-form-item>
            <span>{{ item.code }}</span>
          </el-form-item>
          <el-form-item label="类型:" prop="type">
            {{ item.type | isType }}
          </el-form-item>
          <el-form-item>
            <span>{{ item.icon }}</span>
          </el-form-item>
          <el-form-item>
            <span>{{ item.sort }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="名称" sortable align="center">
    </el-table-column>
    <el-table-column prop="url" label="请求地址" sortable align="center">
    </el-table-column>
    <el-table-column prop="code" label="权限标识" sortable align="center">
    </el-table-column>
    <el-table-column prop="type" label="类型" sortable align="center">
      <template slot-scope="scope">
        {{ scope.row.type | isType }}
      </template>
    </el-table-column>
    <el-table-column prop="icon" label="图标" sortable align="center">
      <template slot-scope="scope">
        <i :class="scope.row.icon"></i>
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序" sortable align="center">
    </el-table-column>
    <el-table-column label="操作" align="center" width="300">
      <template slot-scope="scope">
        <el-button size="mini" type="primary" @click="addDialog"
          >新增</el-button
        >
        <el-button size="mini" @click="editDialog(scope.row.id)"
          >编辑</el-button
        >
        <el-button size="mini" type="danger" @click="delItem(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
let that;

export default {
  props: {
    tableData: Array
  },
  data() {
    return {
      options: [
        { val: 1, title: "目录" },
        { val: 2, title: "按钮" },
        { val: 3, title: "菜单" }
      ]
    };
  },
  methods: {
    // 新增
    addDialog() {
      this.$emit("addDialog", true);
    },
    // 删除
    delItem(id) {
      this.$emit("delItem", id);
    },
    // 编辑 dialog
    editDialog(id) {
      this.$emit("editDialog", id);
    },
    // 分配权限 dialog
    rightDialog() {
      this.$emit("rightDialog");
    }
  },
  filters: {
    // 类型过滤器
    isType(e) {
      return that.options.find(item => item.val == e).title;
    }
  },
  created() {
    that = this;
  }
};
</script>

<style scoped></style>
